<!--客户定位弹窗-->
<template>
  <div class="ne-order-pos">
    <div  v-if="showitem == 1">
      <el-form :model="Form" label-position="left" label-width="1rem">
        <more-panel ref="FormRef" @queryMethods="getqryCustList">
          <div slot="fixed">
            <sim-form :star-index=0 :end-index=4 :Form="Form"></sim-form>
          </div>
          <sim-form :star-index=4 :end-index=Object.entries(Form).length :Form="Form"></sim-form>
        </more-panel>
      </el-form>
      <DicTable height="100%" stripe highlight-current-row highlight-hover-row max-height="600"
                ref="customertable" border header-row-class-name="header-row-class" row-class-name="ne-row-class"
                :columnData="custbs.tableColumns" :tableData="custbs.tableData" :loading="custbs.tableLoading"
                :currentPage="custbs.tablePage.currentPage" :pageSize="custbs.tablePage.pageSize"
                :totalResult="custbs.tablePage.totalResult" :pager="true" @cell-click="cellClickEvent"
                @on-page-change="handlePageChange">
        <template #operation="{ row }">
          <div class="clearfix operation">
            <div class="position">
              <p title="脱敏" class="lock" @click.stop="onLockChange(row)"
                 :class="[row.locked == 1 ? 'active':'']"><i
                  :class="[row.locked == 1 ? 'el-icon-lock':'el-icon-unlock']"/>
              </p>
              <p title="收藏" @click.stop="onCollectChange(row)"><i title="收藏" class="star"
                                                                  :class="[(row.saveFlag == '1') ? 'el-icon-star-on active':'el-icon-star-off']"/>
              </p>
            </div>
          </div>
        </template>
        <template #custName="{ row }">
          <div class="flex">
            <i v-if="!row.identityType||row.identityType==''" class="sfz whg"></i>
            <i v-else class="sfz" :class="[row.identityType=='1'?'dsh':'yhg']"></i>
            <span>{{ row.custName }}</span>
          </div>
        </template>
      </DicTable>
      <ul class="exp flex">
        <li>
          <i class="sfz yhg"></i>已合规-正式身份证
        </li>
        <li>
          <i class="sfz dsh"></i>已合规-临时身份证
        </li>
        <li>
          <i class="sfz whg"></i>未合规
        </li>
      </ul>
    </div>
    <!--      填充联系人信息-->
    <contacts-add v-if="showitem == 2" @addContactResult="addContactResult" :allParams="allParams" :contacts-form="contactsForm"
                  :contacts-json="contactsJson"></contacts-add>
    <!--      省客户列表-->
    <prov-custlist v-if="showitem == 3" @provPageChange="provPageChange" @getProvMsg="getProvMsg" :allParams="allParams" :provData="provData"></prov-custlist>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import MorePanel from "@/components/public/MorePanel/MorePanel";
import OrderService from "@/api/order/OrderService.js";
import CommonUtil from "../../../utils/common";
import SimForm from "@/components/public/SimForm";
import ContactsAdd from "@/components/order/ContactsAdd";
import ProvCustlist from "@/components/order/ProvCustlist";
import {mapState} from "vuex";
// import axios from "axios";
export default {
  name: "posCustomer",
  props: {},
  data() {
    return {
      // provTableData:null,
      // showitem:null,
      showitem: 1,
      contactsForm: {
        CONTACT_NAME: '',
        MOBILE_PHONE: '',
        E_MAIL: ''
      },
      contactsJson: '',
      // provTableData:[],
      provData: {},
      Form: {
        /**
         * type类型
         *         jmIpt精确模糊 input
         *         Ipt普通 input
         *
         */
        // 客户名称
        custName: {
          type: 'jmIpt',
          cName: '客户名称',
          cValue: '',
          oValue: 0,
          opt: [{
            label: '精确',
            value: 0
          }, {
            label: '模糊',
            value: 1
          }]
        },
        //订单流水号  待定 ，显示是受理流水
        custSoNumber: {
          type: 'jmIpt',
          cName: '订单流水号',
          cValue: '',
          oValue: 0,
          opt: [{
            label: '精确',
            value: 0
          }, {
            label: '模糊',
            value: 1
          }]
        },
        //设备号
        accNum: {
          type: 'jmIpt',
          cName: '电路代号/设备号',
          cValue: '',
          oValue: 0,
          opt: [{
            label: '精确',
            value: 0
          }, {
            label: '模糊',
            value: 1
          }]
        },
        //接入号
        account: {
          type: 'Ipt',
          cName: '接入号',
          cValue: ''
        },
        //IDC群号
        groupNbr: {
          type: 'Ipt',
          cName: 'IDC群号',
          cValue: ''
        },
        //客户经理
        custManagerName: {
          type: 'Ipt',
          cName: '客户经理',
          cValue: '',
        },
        //客户编码
        oldPartyCode: {
          type: 'jmIpt',
          cName: '客户编码',
          cValue: '',
          oValue: 0,
          opt: [{
            label: '精确',
            value: 0
          }, {
            label: '模糊',
            value: 1
          }]
        }
      },
      allParams:{},
      // 页面显示判断showitem  1 >>>>>order>>>>表格列表
      //                      2 >>>>>INTERFACE>>>>填充联系人信息表单
      //                      3 >>>>>INTERFAC
      //                      E>>>>多条时返回的弹窗列表
      // 订单order列表
      custbs: {
        tableColumns: [{
          field: "oldPartyCode",
          title: "客户编码",
          width: 150
        },
          {
            field: "regionName",
            title: "营销责任地",
            minWidth: 100
          },
          {
            slotName: "custName",
            title: "客户名称",
            width: 380
          },
          // { field: "custControlLevel", title: "管控级别"},
          {
            field: "custAddr",
            title: "客户地址",
            width: 380
          },
          {
            field: "custManagerNameA",
            title: "客户经理",
            minWidth: 100
          },
          {
            field: "contactName",
            title: "客户联系人",
            minWidth: 100
          },
          {
            field: "contactMobilePhone",
            title: "联系人电话",
            minWidth: 100
          },
          {
            slotName: "operation",
            title: "操作",
            width: 100,
            headerAlign: 'center',
            fixed: 'right'
          },
        ],
        tableData: [],
        tableLoading: false,
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          // pageSize: 2,
          totalResult: 0,
        },
      }
    };
  },
  components: {
    MorePanel,
    DicTable,
    SimForm,
    ContactsAdd,
    ProvCustlist
    // axios
  },
  created() {
    this.$emit('update:title','客户定位');
    this.$nextTick(() => {
    });
    this.getqryCustList();
  },
  mounted() {
  },
  computed: {
    ...mapState('user', ['user'])
  },
  methods: {
    judgeEmptyFun(param) {
      let lp = {
        ...param
      };
      delete lp['pageInfo'];
      let _value = Object.values(lp);
      return _value.some((item) => {
        return item.trim()
      })
    },
    // 查询列表
    async getqryCustList() {
      this.custbs.tableLoading = true;
      let param = CommonUtil.paramsFun(0, this.Form, 'pageIndex', this.custbs.tablePage.currentPage, this
          .custbs.tablePage.pageSize);
      let ifEmpty = this.judgeEmptyFun(param);
      if (!ifEmpty) {
        param['collectFlag'] = 1;
      }
      // 添加分页后报错，暂时先删除
      // delete param['pageInfo'];
      let empeeId = this.user.staffId,
          searchFlag = 3,
          ifSens=1;
      this.allParams = {empeeId, searchFlag,ifSens, ...param};
      const result = await OrderService.getQryCustList(this.allParams);
      this.custbs.tableLoading = false;
      // const result = await OrderService.getQryCustList({type:'INTERFACEN',...param});
      // const result = await OrderService.getQryCustList({type:'INTERFACE',...param});
      const res = result.meta;
      //        clType = res.custListType;
      const clType = res.custListType;
      if (result.meta.resultCode == 0) {
        if (clType == "ORDER") {

          this.showitem = 1;
          if (!res.resultObject.hasOwnProperty('customers')) {
            res.resultObject.customers = [];
          }
          // 临时
          res.resultObject.customers.map((item) => {
            item.locked = 0;
          })
          this.custbs.tableData = res.resultObject.customers;
          this.custbs.tablePage.currentPage = Number(res.resultObject.pageInfo.pageIndex);
          this.custbs.tablePage.totalResult = Number(res.resultObject.pageInfo.rowCount);
        } else if (clType == 'INTERFACE') {

          this.$emit('update:dialogTitle','省客户列表');
          if (res.resultObject.customers.length==1) {
            // 填写联系人信息----弹出填充联系人信息页面

            this.contactsJson = res.resultObject.customers;
            this.showitem = 2;
          } else if(res.resultObject.customers.length>1) {

            this.showitem = 3;
            this.provData = res;
          }
        }
      } else {
        this.$message.error(result.meta.resultMsg);
      }
    },
    onLockChange(row) {
      if (row.locked) {
        row.locked = 0;
      } else {
        row.locked = 1;
      }

    },
    async onCollectChange(row) {
      let params = {};
      if (row.saveFlag == '0') {
        row.saveFlag = '1';
        params = {
          modType: "add",
          staffId: this.user.staffId,
          objType: "2",
          objId: row.custId,
          count: "1",
          saveFlag: "1"
        }
      } else {
        row.saveFlag = '0';
        params = {
          modType: "del",
          actType: "DEL",
          tableName: "STAFF_OBJECT",
          staffId: this.user.staffId,
          objId: row.custId
        };
      }
      const result = await OrderService.collectCust(params);
      if (result.code == 200) {
        this.$notify.success({
          title: row.saveFlag == '1' ? '收藏成功' : '已取消收藏',
          message: '',
          showClose: false,
          duration: 1200
        });
      }
    },
    handlePageChange({currentPage, pageSize}) {
      this.custbs.tablePage.currentPage = currentPage;
      this.custbs.tablePage.pageSize = pageSize;
      this.getqryCustList();
    },
    // 省客户列表填充联系人回调
    getProvMsg(msg) {
      this.showitem = msg.showitem;
      this.contactsJson = msg.returnJson;
      this.contactsForm = {
        CONTACT_NAME: msg.contacts.contactName,
        MOBILE_PHONE: msg.contacts.mobilePhone,
        E_MAIL: msg.contacts.eMail
      };
    },
    // 添加联系人成功回调
    addContactResult() {

      let result = arguments[0];
      this.showitem = 1;
      this.custbs.tableData = result.meta.resultObject.customers;
      this.custbs.tablePage.currentPage = result.meta.resultObject.pageInfo.pageIndex;
      this.custbs.tablePage.pageSize = result.meta.resultObject.pageInfo.pageSize;
      this.custbs.tablePage.totalResult = result.meta.resultObject.pageInfo.rowCount;
    },
    //规则校验下一步
    ruleCheckNext() {

      let result = arguments[0];
      this.showitem = 1;
      this.custbs.tableData = result.svcCont.resultObject.customers;
    },


    // 行点击事件
    async cellClickEvent() {
      //客户定位规则埋点
      var ruleParam = [{
        "PUB_REQ": {
          "TYPE": "GOVCRM.ORDERSET.localCust"
        },
        "CUST": {
          "CUST_ID": arguments[0].row.custId + ""
        },
        "ORDCOMMON": {
          "STAFF_ID": this.user.staffId + "",
          "ORG_ID": this.user.orgId + ""
        }
      }];
      //调用规则平台
      const result = await OrderService.rulePlatfromCheck(ruleParam);
      let ruleCode = result.code;
      let ruleMsg = result.msg;
      //直接通过校验
      if (ruleCode == 0) {
        //直接校验通过继续之前逻辑
        this.$store.commit('orders/SET_CUSTID', arguments[0].row.custId);
        this.$store.commit('orders/SET_CUSTNAME', arguments[0].row.custName);
        this.$store.commit('orders/SET_CUSTMSG', arguments[0].row);
        // 客户定位、新建订单、信息录入需要清缓存刷新数据
        this.$router.options.routes.map((item) => {
          if (item.name == 'custinfo' || item.name == 'orderadd' || item.name == 'inforentryppm') {
            item.meta.isFefresh = true;
          }
        });
        this.$store.commit('orders/SET_STEPACTIVE', 1);
        this.$emit('update:show', false);
      } else {
        //校验结果有警告或者拒绝，弹窗提示
        //图标样式
        let iconType = 'warning';
        if (ruleCode == 2) {
          iconType = 'error';
        }
        this.$confirm(ruleMsg, '提示', {
          confirmButtonText: '确定',
          type: iconType
        }).then(() => {
          //不是拒绝执行（提醒或异常）
          if (ruleCode != 2) {
            //继续之前逻辑
            this.$store.commit('orders/SET_CUSTID', arguments[0].row.custId);
            this.$store.commit('orders/SET_CUSTNAME', arguments[0].row.custName);
            this.$store.commit('orders/SET_CUSTMSG', arguments[0].row);
            // 客户定位、新建订单、信息录入需要清缓存刷新数据
            this.$router.options.routes.map((item) => {
              if (item.name == 'custinfo' || item.name == 'orderadd' || item.name == 'inforentryppm') {
                item.meta.isFefresh = true;
              }
            });
            this.$store.commit('orders/SET_STEPACTIVE', 1);
            this.$emit('update:show', false);
          }
        }).catch(() => {

        });
      }
    },
    async provPageChange(arg){

      arg.custName = this.allParams.custName;
      const ctResult = await this.$parent.$parent.loadCustList(arg);

      if(~~ctResult.code==200){
        if(ctResult.meta.customer.length>0){
          this.provData = ctResult.meta;
          this.provData.resultObject = {},
          this.provData.resultObject.customers = JSON.parse(JSON.stringify(this.provData.customer));
          delete this.provData.customer;
          this.provData.pageInfo={
            pageIndex:ctResult.meta.pageIndex,
            pageSize:ctResult.meta.pageSize
          }
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.ne-order-pos {
  position: relative;

  ::v-deep .form-block {
    padding: 0 !important;
    box-shadow: none !important;
  }

  .operation {
    width: 100%;
    padding: 0 10px !important;
    height: .34rem;
    /*line-height: 41rem;*/
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

    .position {
      width: 100%;
      height: 100%;
      /*position: absolute;*/
      /*top: 0;*/
      /*left: 0;*/
      position: relative;
      text-align: center;
    }

    i {
      font-size: 13px;
      color: $blue;

      &.star {
        font-size: 16px;

        &.el-icon-star-on {
          color: #fdb11f;
          font-size: 20px;

          &:hover {
            font-size: 22px;
          }
        }

        &:hover {
          font-size: 19px;
        }

        //&.active{
        //  color: #FDB11F;
        //}
      }
    }

    p {
      display: inline-block;
      /*margin: 10rem 8rem 0 8rem;*/
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      position: absolute;
      top: .07rem;

      &:nth-child(2) {
        text-align: left;
        width: 30px;
        right: 0;
      }

      &:nth-child(1) {
        right: 38px;

        &:hover {
          top: .05rem;
          width: 22px;
          height: 22px;
          line-height: 22px;
          background-color: $blue;

          i {
            color: #fff;
            font-size: 14px;
          }
        }
      }

      i {
        color: $blue;
      }

      &.lock {
        border-radius: 50%;
        background-color: $blue;
        border: .001rem solid $blue;
        box-sizing: border-box;
        line-height: 17px;

        &.active:hover {
          i {
            top: 0rem;
          }
        }

        i {
          color: #fff;
        }

        &.active {
          line-height: 20px;
          background-color: #fff;
          border: 1px solid #cbcbcb;

          i {
            color: #cbcbcb;
            position: relative;
            top: -.01rem;
          }
        }
      }

    }
  }

  .exp {
    position: absolute;
    bottom: 0.05rem;

    li {
      i {
        width: .14rem;
        height: .14rem;
        position: relative;
        bottom: -.02rem;
      }

      color: $textColor3;
      font-size: $fontSize_info;
      margin-right: .1rem;
    }
  }

  .sfz {
    display: inline-block;
    width: .15rem;
    height: .15rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: .05rem;

    &.yhg {
      background-image: url('~@/assets/imgs/order/p_yihegui.png');
    }

    &.whg {
      background-image: url('~@/assets/imgs/order/p_weihegui.png');
    }

    &.dsh {
      background-image: url('~@/assets/imgs/order/p_daihegui.png');
    }
  }
}
</style>
